<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Explode</title>
<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

<script type="text/javascript" src="../effects.core.js"></script>
<script type="text/javascript" src="../effects.explode.js"></script>


<style type="text/css" media="screen">
body {
  font-size: 10px;
  font-family: Arial;
  margin:0; padding:0;
}
.controls {font-size:12px;width:510px;margin:0 auto;border:1px solid #ccc;}
.controls a {display:block; width:150px;float:left;}
.controls div {padding:10px;clear:both;}
.text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
#container {height:420px; width:510px; margin:0 auto;}
#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
</style>
</head>
<body>
  
<div id="container">
  <div class="text">Header Content</div>
  <div id="fx">
  <div style='padding:2px;'>Explode Me!</div>
  <img src="images/very-cute-puppy.jpg">
  <div style='padding:2px;'>What a <b>cute</b> puppy!</div>
  </div>
  <div class="text">Footer Content</div>
</div>

<div class="controls">
  <div>
    <a href="#" onClick="$('#fx').hide('explode', { pieces: 100 }, 2000);return false;">Explode</a>
    <a href="#" onClick="$('#fx').show('explode', { }, 2000);return false;">Implode</a>
    <a href="#" onClick="$('#fx').toggle('explode', { pieces: 36 });return false;">Toggle explode</a>
  </div>
  <div style="clear:both;padding-bottom:5px;"></div>
</div>
 

</body>
</html>
